<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left">
				<view class="global-header-left" @click="goBack">
					<view class="global-back-button">
						<text class="global-back-icon">‹</text>
				</view>
					<text class="global-back-text">返回</text>
				</view>
			</view>
			<view class="header-center">
				<text class="header-title">附近门店</text>
			</view>
		</view>
		
		<!-- 内容区域 - 门店列表 -->
		<scroll-view class="content" scroll-y="true" enable-back-to-top="true" v-if="hasLocation">
			<view class="shop-list">
				<view 
					class="shop-item" 
					v-for="(shop, index) in sortedShops" 
					:key="index"
					@click="selectShop(shop)"
				>
					<view class="shop-info">
						<text class="shop-name">{{ shop.name || '未知门店' }}</text>
						<view class="shop-details">
							<text class="shop-address">{{ shop.address || '' }}</text>
							<text class="shop-city" v-if="shop.city">{{ shop.city }}</text>
					</view>
				</view>
					<view class="shop-status">
						<view class="status-icon">
							<text class="status-number">{{ index + 1 }}</text>
						</view>
						<text class="shop-distance">{{ formatDistance(shop.distanceMeters) }}</text>
						<!-- 打卡按钮：距离不超过500米时显示 -->
						<button 
							class="checkin-btn" 
							v-if="isWithinCheckinDistance(shop.distanceMeters)"
							@click.stop="handleCheckin(shop)"
						>
							打卡
						</button>
					</view>
			</view>
			
				<!-- 空状态 -->
				<view class="empty-state" v-if="sortedShops.length === 0">
					<text class="empty-text">暂无附近门店</text>
				</view>
			</view>
		</scroll-view>

		<!-- 无位置权限提示 -->
		<view class="no-location-tip" v-if="!hasLocation">
			<text class="tip-title">需要位置权限</text>
			<text class="tip-content">无法获取您的位置信息，无法查看附近门店</text>
			<text class="tip-content">请在设置中开启位置权限后重试</text>
			<button class="retry-btn" @click="getUserLocation">重新获取位置</button>
		</view>

		<!-- 打卡成功弹窗 -->
		<view v-if="showSuccessModal" class="success-modal-mask" @click="closeSuccessModal">
			<view class="success-modal-content" @click.stop>
				<!-- 背景图片容器 -->
				<view class="success-modal-bg-wrapper">
					<image
						class="success-modal-bg"
						src="/static/资源 42-8.png"
						mode="aspectFit"
						:style="{ width: '600rpx', height: '800rpx' }"
					></image>
					<!-- 成功图标：红色圆圈带白色对勾 -->
					<view class="success-icon">
						<view class="success-icon-circle">
							<text class="success-icon-check">✓</text>
						</view>
					</view>
					<!-- 打卡成功文字 -->
					<view class="success-text">打卡成功</view>
					<!-- 立即抽奖按钮 -->
					<view class="lottery-button" @click="handleLottery">
						立即抽奖
					</view>
				</view>
			</view>
			</view>
	</view>
</template>

<script>
import { getImageUrl as getImageUrlFromConfig } from '@/api/config'
import { nearestShops } from '@/api/store'
import { addLotteryChance } from '@/api/lottery'
import { SpbLottryType } from '@/api/apifox/models'

export default {
		data() {
		return {
			useMockData: false, // 假数据开关，true=使用假数据，false=使用真实API
			userLat: null,
			userLng: null,
			hasLocation: false,
			shops: [], // 门店列表
			loading: false,
			showSuccessModal: false // 是否显示成功弹窗
		}
	},
	computed: {
		// 按距离排序的门店列表
		sortedShops() {
			if (!this.shops || this.shops.length === 0) {
				return []
			}
			
			// 复制数组并排序
			const sorted = [...this.shops].sort((a, b) => {
				const distanceA = parseFloat(a.distanceMeters || '999999')
				const distanceB = parseFloat(b.distanceMeters || '999999')
				return distanceA - distanceB
			})
			
			return sorted
		}
	},
	onLoad() {
		// 根据开关决定使用假数据还是真实API
		if (this.useMockData) {
			// 使用假数据
			this.loadMockData()
			this.hasLocation = true // 设置为true以显示门店列表
		} else {
			// 使用真实API，获取用户位置
			this.getUserLocation()
		}
	},
	methods: {
		getImageUrl(imagePath) {
			if (!imagePath) return ''
			try {
				return getImageUrlFromConfig(imagePath)
			} catch (error) {
				console.error('getImageUrl error:', error)
				return ''
			}
		},
		goBack() {
			// 设置 goStore 缓存，用于在首页显示欢迎回来弹窗
			uni.setStorageSync('goStore', true)
			uni.navigateBack()
		},
		/**
		 * 加载假数据用于预览
		 */
		loadMockData() {
			this.shops = [
				{
					id: 1,
					name: '特斯拉超级充电站（北京朝阳大悦城）',
					address: '北京市朝阳区朝阳北路101号朝阳大悦城B1层',
					city: '北京市',
					distanceMeters: '300', // 300米，应该显示打卡按钮
					latitude: 39.9289,
					longitude: 116.5200
				},
				{
					id: 2,
					name: '特斯拉超级充电站（上海陆家嘴）',
					address: '上海市浦东新区陆家嘴环路1000号',
					city: '上海市',
					distanceMeters: '1200',
					latitude: 31.2304,
					longitude: 121.4737
				},
				{
					id: 3,
					name: '特斯拉超级充电站（深圳南山科技园）',
					address: '深圳市南山区科技园南区深南大道9988号',
					city: '深圳市',
					distanceMeters: '2.5',
					latitude: 22.5431,
					longitude: 113.9344
				},
				{
					id: 4,
					name: '特斯拉超级充电站（广州天河城）',
					address: '广州市天河区天河路208号天河城购物中心',
					city: '广州市',
					distanceMeters: '3200',
					latitude: 23.1291,
					longitude: 113.2644
				},
				{
					id: 5,
					name: '特斯拉超级充电站（杭州西湖）',
					address: '杭州市西湖区文三路259号',
					city: '杭州市',
					distanceMeters: '5.8',
					latitude: 30.2741,
					longitude: 120.1551
				},
				{
					id: 6,
					name: '特斯拉超级充电站（成都春熙路）',
					address: '成都市锦江区春熙路123号',
					city: '成都市',
					distanceMeters: '8.2',
					latitude: 30.6624,
					longitude: 104.0633
				},
				{
					id: 7,
					name: '特斯拉超级充电站（西安钟楼）',
					address: '西安市碑林区东大街1号',
					city: '西安市',
					distanceMeters: '12.5',
					latitude: 34.2583,
					longitude: 108.9402
				},
				{
					id: 8,
					name: '特斯拉超级充电站（南京新街口）',
					address: '南京市秦淮区中山南路1号',
					city: '南京市',
					distanceMeters: '15.3',
					latitude: 32.0415,
					longitude: 118.7674
				}
			]
			// 设置 hasLocation 为 true，以便显示列表
			this.hasLocation = true
		},
		/**
		 * 获取用户当前位置
		 */
		getUserLocation() {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			console.log('开始获取用户位置...')
			this.checkLocationPermission()
		},
		
		/**
		 * 检查地理位置权限状态
		 */
		checkLocationPermission() {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			// #ifdef MP-WEIXIN
			uni.getSetting({
				success: (res) => {
					console.log('权限检查结果:', res.authSetting)
					const locationAuth = res.authSetting['scope.userLocation']
					
					if (locationAuth === true) {
						// 已授权，直接获取位置
						console.log('位置权限已授权，开始获取位置')
						this.doGetLocation()
					} else if (locationAuth === false) {
						// 用户之前拒绝了授权，需要引导到设置页面
						console.log('位置权限被拒绝，提示用户')
						this.handlePermissionRejection()
					} else {
						// 未询问过，直接请求授权
						console.log('首次请求位置权限')
						this.requestLocationPermission()
					}
				},
				fail: (err) => {
					console.error('检查权限失败:', err)
					// 权限检查失败，尝试直接获取位置
					this.doGetLocation()
				}
			})
			// #endif
			
			// #ifndef MP-WEIXIN
			// 其他平台直接获取位置
			this.doGetLocation()
			// #endif
		},
		
		/**
		 * 首次请求位置权限
		 */
		requestLocationPermission() {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			uni.getLocation({
				type: 'gcj02',
				altitude: false,
				geocode: false,
				success: (res) => {
					console.log('首次授权成功，获取位置:', res)
					this.userLat = res.latitude
					this.userLng = res.longitude
					this.hasLocation = true
					// 获取位置成功后，加载附近门店
					this.loadNearbyShops()
				},
				fail: (err) => {
					console.log('首次授权失败:', err)
					if (err.errMsg && err.errMsg.includes('auth deny')) {
						// 用户拒绝了授权
						this.handlePermissionRejection()
					} else {
						// 其他错误
						this.handleLocationError(err)
					}
				}
			})
		},
		
		/**
		 * 处理用户拒绝授权的情况
		 */
		handlePermissionRejection() {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			this.hasLocation = false
			uni.showModal({
				title: '需要位置权限',
				content: '无法获取您的位置信息，无法查看附近门店。\n\n请在设置中开启位置权限后重试。',
				confirmText: '去设置',
				cancelText: '知道了',
				success: (res) => {
					if (res.confirm) {
						// 用户选择去设置
						this.openSettings()
					}
				}
			})
		},
		
		/**
		 * 打开设置页面
		 */
		openSettings() {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			uni.openSetting({
				success: (res) => {
					console.log('设置页面返回结果:', res.authSetting)
					if (res.authSetting['scope.userLocation']) {
						// 用户在设置中开启了位置权限
						uni.showToast({
							title: '权限已开启',
							icon: 'success',
							duration: 1500
						})
						// 重新获取位置
						setTimeout(() => {
							this.doGetLocation()
						}, 1500)
					}
				},
				fail: (err) => {
					console.error('打开设置失败:', err)
				}
			})
		},
		
		/**
		 * 执行获取位置
		 */
		doGetLocation() {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			uni.getLocation({
				type: 'gcj02',
				altitude: false,
				geocode: false,
				success: (res) => {
					console.log('获取位置成功:', res)
					this.userLat = res.latitude
					this.userLng = res.longitude
					this.hasLocation = true
					// 获取位置成功后，加载附近门店
					this.loadNearbyShops()
				},
				fail: (err) => {
					console.error('获取位置失败:', err)
					this.hasLocation = false
					
					// 提示用户
					uni.showModal({
						title: '位置获取失败',
						content: '无法获取您的位置信息，无法查看附近门店。\n\n请检查是否已开启位置权限。',
						confirmText: '去设置',
						cancelText: '知道了',
						success: (res) => {
							if (res.confirm) {
								// 用户选择去设置
								this.openSettings()
							}
						}
					})
				}
			})
		},
		
		/**
		 * 处理位置获取错误
		 */
		handleLocationError(err) {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			console.error('位置获取错误:', err)
			this.hasLocation = false
			
			uni.showModal({
				title: '位置获取失败',
				content: '无法获取您的位置信息，无法查看附近门店。\n\n请检查是否已开启位置权限。',
				confirmText: '去设置',
				cancelText: '知道了',
				success: (res) => {
					if (res.confirm) {
						// 用户选择去设置
						this.openSettings()
					}
				}
			})
		},
		
		/**
		 * 加载附近门店
		 */
		async loadNearbyShops() {
			// 如果使用假数据，直接返回
			if (this.useMockData) {
				return
			}
			
			if (!this.userLat || !this.userLng) {
				console.warn('没有位置信息，无法加载门店')
				return
			}
			
			if (this.loading) {
				return
			}
			
			this.loading = true
			
			try {
				const response = await nearestShops({
					latitude: this.userLat,
					longitude: this.userLng,
					limit: 50 // 最多返回50个门店
				})
				
				console.log('门店列表响应:', response)
				
				if (response && response.shops && Array.isArray(response.shops)) {
					this.shops = response.shops
					console.log('成功加载门店列表，共', this.shops.length, '个门店')
				} else {
					this.shops = []
					console.warn('门店列表为空或格式不正确')
				}
			} catch (error) {
				console.error('加载门店列表失败:', error)
				this.shops = []
				uni.showToast({
					title: '加载门店失败',
					icon: 'none',
					duration: 2000
				})
			} finally {
				this.loading = false
			}
		},
		
		/**
		 * 格式化距离
		 * @param {string} distanceMeters 距离（米）
		 * @returns {string} 格式化后的距离字符串
		 */
		formatDistance(distanceMeters) {
			if (!distanceMeters) {
				return '未知距离'
			}
			
			const distance = parseFloat(distanceMeters)
			
			if (isNaN(distance)) {
				return '未知距离'
			}
			
			// 如果距离小于10，可能是以公里为单位传入的
			if (distance < 10) {
				return `${distance.toFixed(1)} km`
			}
			
			if (distance < 1000) {
				// 小于1公里，显示米
				return `${Math.round(distance)} m`
			} else {
				// 大于等于1公里，显示公里（保留1位小数）
				return `${(distance / 1000).toFixed(1)} km`
			}
		},
		
		/**
		 * 判断距离是否在打卡范围内（不超过500米）
		 * @param {string|number} distanceMeters 距离（米）
		 * @returns {boolean} 如果在500米内返回true，否则返回false
		 */
		isWithinCheckinDistance(distanceMeters) {
			if (!distanceMeters) {
				return false
			}
			
			const distance = parseFloat(distanceMeters)
			
			if (isNaN(distance)) {
				return false
			}
			
			// 如果距离小于10，可能是以公里为单位传入的，需要转换为米
			const distanceInMeters = distance < 10 ? distance * 1000 : distance
			
			// 距离不超过500米
			return distanceInMeters <= 500
		},
		
		/**
		 * 获取今天的日期字符串（格式：YYYY-MM-DD）
		 * @returns {string} 日期字符串
		 */
		getTodayDateString() {
			const today = new Date()
			const year = today.getFullYear()
			const month = today.getMonth() + 1
			const day = today.getDate()
			// 使用更兼容的方式格式化日期
			const monthStr = month < 10 ? '0' + month : String(month)
			const dayStr = day < 10 ? '0' + day : String(day)
			return `${year}-${monthStr}-${dayStr}`
		},
		
		/**
		 * 检查今天是否已经打卡
		 * @returns {boolean} 如果今天已经打卡返回true，否则返回false
		 */
		hasCheckedInToday() {
			try {
				const lastCheckinDate = uni.getStorageSync('store_checkin_date')
				if (!lastCheckinDate) {
					return false
				}
				
				// 获取今天的日期字符串
				const todayStr = this.getTodayDateString()
				
				// 比较日期字符串
				return lastCheckinDate === todayStr
			} catch (error) {
				console.error('检查打卡状态失败:', error)
				return false
			}
		},
		
		/**
		 * 保存今天的打卡日期
		 */
		saveCheckinDate() {
			try {
				const todayStr = this.getTodayDateString()
				uni.setStorageSync('store_checkin_date', todayStr)
				console.log('保存打卡日期:', todayStr)
			} catch (error) {
				console.error('保存打卡日期失败:', error)
			}
		},
		
		/**
		 * 处理打卡
		 * @param {Object} shop 门店信息
		 */
		async handleCheckin(shop) {
			console.log('打卡门店:', shop)
			
			// 检查今天是否已经打卡
			if (this.hasCheckedInToday()) {
				uni.showToast({
					title: '今天已打卡，明天再来',
					icon: 'none',
					duration: 2000
				})
				return
			}
			
			// 再次验证距离
			if (!this.isWithinCheckinDistance(shop.distanceMeters)) {
				uni.showToast({
					title: '距离过远，无法打卡',
					icon: 'none',
					duration: 2000
				})
				return
			}
			
			try {
				// 调用增加抽奖机会接口
				await addLotteryChance({
					lottryType: SpbLottryType.LottryTypeStoreCheckin
				})
				
				// 保存打卡日期
				this.saveCheckinDate()
				
				// 显示成功弹窗
				this.showSuccessModal = true
			} catch (error) {
				console.error('打卡失败:', error)
				uni.showToast({
					title: error?.message || '打卡失败，请重试',
					icon: 'none',
					duration: 2000
				})
			}
		},
		
		/**
		 * 关闭成功弹窗
		 */
		closeSuccessModal() {
			this.showSuccessModal = false
		},
		
		/**
		 * 处理立即抽奖按钮点击
		 */
		handleLottery() {
			// 关闭弹窗
			this.closeSuccessModal()
			// 跳转到抽奖页面
			uni.navigateTo({
				url: '/pages/lottery/index'
			})
		},
		
		/**
		 * 选择门店
		 */
		selectShop(shop) {
			console.log('选择门店:', shop)
			// 可以跳转到门店详情页或打开导航
			uni.showActionSheet({
				itemList: ['查看详情', '导航前往'],
				success: (res) => {
					if (res.tapIndex === 0) {
						// 查看详情（如果有详情页）
						// uni.navigateTo({
						// 	url: `/pages/store/detail?id=${shop.id}`
						// })
						uni.showToast({
							title: '详情功能开发中',
							icon: 'none'
						})
					} else if (res.tapIndex === 1) {
						// 导航前往
						if (shop.latitude && shop.longitude) {
						uni.openLocation({
								latitude: shop.latitude,
								longitude: shop.longitude,
								name: shop.name || '门店',
								address: shop.address || ''
							})
						} else {
							uni.showToast({
								title: '门店位置信息不完整',
								icon: 'none'
						})
						}
					}
				}
			})
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #93D3F4;
	display: flex;
	flex-direction: column;
	padding: 0;
	--header-height: 184rpx; /* 头部高度 */
	--content-margin-top: 20rpx; /* content 的 margin-top */
}

/* 顶部导航栏 */
.header {
	background: transparent;
	padding: var(--status-bar-height, 44rpx) 30rpx 20rpx;
	padding-top: 104rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1000;
	height: 184rpx; /* 104rpx (padding-top) + 60rpx (按钮高度) + 20rpx (padding-bottom) */
	box-sizing: border-box;
}

.header-left {
	flex: 1;
}

.header-center {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.header-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #0071BC;
}

/* 全局返回按钮样式 */
.global-back-button {
	width: 60rpx;
	height: 60rpx;
	background: #0071BC;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15rpx;
}

.global-back-icon {
	color: white;
	font-size: 40rpx;
	font-weight: bold;
	line-height: 1;
}

.global-back-text {
	color: #000000;
	font-size: 28rpx;
}

.global-header-left {
	display: flex;
	align-items: center;
}

/* 内容区域 */
.content {
	height: calc(100vh - var(--header-height) - var(--content-margin-top)); /* 100vh - 头部高度 - margin-top */
	padding: 0 20rpx 20rpx;
	margin-top: var(--content-margin-top);
	box-sizing: border-box;
	background: #fff;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
	overflow: hidden; /* 确保内容不会溢出 */
}

.shop-list {
	padding: 30rpx 0;
}

.shop-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #F0F0F0;
	background-color: #FFFFFF;
}

.shop-item:last-child {
	border-bottom: none;
}

.shop-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.shop-name {
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	line-height: 1.4;
}

.shop-details {
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.shop-address {
	font-size: 24rpx;
	color: #666666;
	line-height: 1.4;
}

.shop-city {
	font-size: 22rpx;
	color: #999999;
}

.shop-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10rpx;
	margin-left: 20rpx;
}

.status-icon {
	width: 60rpx;
	height: 60rpx;
	background-color: #FF4444;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status-number {
	font-size: 28rpx;
	font-weight: bold;
	color: #FFFFFF;
}

.shop-distance {
	font-size: 24rpx;
	color: #666666;
}

.checkin-btn {
	padding: 8rpx 24rpx;
	background-color: #0071BC;
	color: #FFFFFF;
	border-radius: 30rpx;
	font-size: 24rpx;
	font-weight: 500;
	line-height: 1.2;
	border: none;
	min-width: 80rpx;
	animation: breathe 2s ease-in-out infinite;
	box-shadow: 0 0 0 0 rgba(0, 113, 188, 0.7);
}

.checkin-btn::after {
	border: none;
}

@keyframes breathe {
	0%, 100% {
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(0, 113, 188, 0.7);
}
	50% {
		opacity: 0.8;
		box-shadow: 0 0 0 8rpx rgba(0, 113, 188, 0);
}
}

.empty-state {
	padding: 100rpx 0;
	text-align: center;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
}

/* 无位置权限提示 */
.no-location-tip {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 50rpx;
	background: #fff;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
	margin-top: 20rpx;
}

.tip-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
}

.tip-content {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.6;
	text-align: center;
	margin-bottom: 15rpx;
}

.retry-btn {
	margin-top: 40rpx;
	padding: 20rpx 60rpx;
	background-color: #0071BC;
	color: #FFFFFF;
	border-radius: 50rpx;
	font-size: 28rpx;
	font-weight: bold;
}

.retry-btn::after {
	border: none;
}

/* 成功弹窗遮罩层 */
.success-modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease-in-out;
}

/* 成功弹窗内容 */
.success-modal-content {
	position: relative;
	width: 600rpx;
	max-width: 90%;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: scaleIn 0.3s ease-in-out;
}

/* 背景图片容器 */
.success-modal-bg-wrapper {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 150rpx;
	}
	
/* 背景图片 */
.success-modal-bg {
	width: 600rpx;
	height: 800rpx;
	border-radius: 20rpx;
}

/* 成功图标：红色圆圈带白色对勾 */
.success-icon {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	}
	
.success-icon-circle {
	width: 120rpx;
	height: 120rpx;
	background: #ff0000;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(255, 0, 0, 0.4);
}

.success-icon-check {
	color: #ffffff;
	font-size: 80rpx;
	font-weight: bold;
	line-height: 1;
}

/* 打卡成功文字 */
.success-text {
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ff0000;
	font-size: 66rpx;
	font-weight: bold;
	text-align: center;
	z-index: 10;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	width: 100%;
	}
	
/* 立即抽奖按钮 */
.lottery-button {
	position: absolute;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 400rpx;
	height: 88rpx;
	background: #ff0000;
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 36rpx;
	font-weight: bold;
	box-shadow: 0 8rpx 24rpx rgba(255, 0, 0, 0.4);
	transition: all 0.3s ease;
	z-index: 10;
	}
	
.lottery-button:active {
	transform: translateX(-50%) scale(0.95);
	box-shadow: 0 4rpx 12rpx rgba(255, 0, 0, 0.3);
	}
	
/* 弹窗淡入动画 */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 弹窗缩放动画 */
@keyframes scaleIn {
	from {
		transform: scale(0.8);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
</style>
